<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, onBeforeUnmount } from 'vue'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
})
const [startValue, endValue] = [0, 4]
const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: "shadow",
        },
        backgroundColor: "rgba(24, 125, 255, 0.8)",
        textStyle: {
            color: "#ffffff",
        },
    },
    grid: {
        top: '12%',
        right: '5%',
        left: '2%',
        bottom: '0%',
        containLabel: true,
    },
    dataZoom: {
        show: false,
        startValue,
        endValue
    },
    xAxis: [
        {
            type: 'category',
            data: props.xData,
            axisLine: {
                lineStyle: {
                    color: '#02387B',
                },
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                // margin: 10,
                color: '#ffffff',
                textStyle: {
                    fontSize: 12,
                },
            },
        },
    ],
    yAxis: [
        {
            axisLabel: {
                formatter: '{value}',
                color: 'rgba(255, 255, 255, 0.5)',
            },
            axisLine: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(108, 128, 151, 0.3)',
                },
            },
        },
    ],
    series: [
        {
            type: 'line',
            data: props.sData,
            smooth: true,
            type: 'pictorialBar',
            symbol: 'path://M0, 0, L50, 0, L25, -100',
            symbolClip: true,
            itemStyle: {
                color: '#FF8F1F',
            },
            lineStyle: {
                color: '#02FBFD',
                width: 3
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                        {
                            offset: 0,
                            color: '#FF8F1F', // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: '#FF8F1F', // 100% 处的颜色
                        },
                    ],
                    false
                ),
            },
            label: {
                normal: {
                    position: 'top',
                    color: '#fff',
                    show: true,
                    // lineHeight: 30,
                    // width: 80,
                    // height: 30,
                    // backgroundColor: 'rgba(0,160,221,0.1)',
                    // borderRadius: 200,
                    // position: ['-8', '-60'],
                    // distance: 1,
                    // formatter: [
                    //     '    {d|●}',
                    //     ' {a|{c}}     \n',
                    //     '    {b|}'
                    // ].join(','),
                    // rich: {
                    //     d: {
                    //         color: '#3CDDCF',
                    //     },
                    //     a: {
                    //         color: '#fff',
                    //         align: 'center',
                    //     },
                    //     b: {
                    //         width: 1,
                    //         height: 30,
                    //         borderWidth: 1,
                    //         borderColor: '#234e6c',
                    //         align: 'left'
                    //     },
                    // }
                },
            },
        },
    ],
}
const chart = ref()
let timer2 = null
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
    timer2 = setInterval(() => {
        const item1 = props.xData.shift()
        props.xData.push(item1)
        const item2 = props.sData.shift()
        props.sData.push(item2)
        myChart.setOption(option)
    }, 5000)
})
onBeforeUnmount(() => {
  clearInterval(timer2)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
